<template>
  <div class="index-year sub-margin">
    <div class="content">
      <div class="year-table">
        <YearTable
          ref="yearTable"
          :source="tableList"
          :assessRatio="assessRatio"
          @setEqual="setEqual"
          @changeSort="changeSort"
          :isDisabled="gradeNumObj.isSubmit === '0'">
          <div slot="search" class="search-box">
            <div class="search-left">
              <div class="search-item">
                <el-select
                  v-model="grainDate"
                  filterable
                  placeholder="请选择"
                  size="small"
                  clearable
                  @change="searchData">
                  <el-option
                    v-for="item in timeList"
                    :key="item.year"
                    :label="item.name"
                    :value="item.year"></el-option>
                </el-select>
              </div>
              <div class="search-item">
                <div class="item_label" style="min-width: 60px">考核等次:</div>
                <el-select
                  v-model="summaryForm.finalRank"
                  filterable
                  placeholder="请选择"
                  size="small"
                  clearable
                  @change="searchData"
                  class="mini-select">
                  <el-option
                    v-for="item in orderOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="search-item">
                <div class="item_label">状态:</div>
                <el-select
                  v-model="summaryForm.assStatus"
                  filterable
                  placeholder="请选择"
                  size="small"
                  clearable
                  @change="searchData"
                  class="mini-select">
                  <el-option
                    v-for="item in sureOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="search-item">
                <div class="item_label">部门:</div>
                <el-select
                  v-model="summaryForm.orgId"
                  filterable
                  placeholder="请选择"
                  size="small"
                  clearable
                  @change="searchData">
                  <el-option
                    v-for="item in unitData"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-right">
              <div class="search-item">
                <div class="item_label">考核人数：{{ gradeNumObj.totalNum }}人</div>
              </div>
              <div class="search-item">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="summaryForm.name"
                  size="small"
                  clearable
                  @keyup.enter.native="searchData">
                  <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
                </el-input>
              </div>
            </div>
          </div>
          <div slot="search" class="search-box">
            <div class="search-left">
              <div class="search-item">
                <el-button type="primary" size="small" icon="el-icon-download" @click.stop="exportClick">
                  导出
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="submitResultBatch"
                  v-if="gradeNumObj.isSubmit === '1'">
                  提交结果
                </el-button>
              </div>
            </div>
            <div class="search-right">
              <div class="search-item">
                <div class="info">
                  <div class="info_list">已完成考核人数 {{ gradeNumObj.assNum }}人</div>
                  <div class="info_list">优秀：{{ gradeNumObj.anum }}人</div>
                  <div class="info_list">称职：{{ gradeNumObj.bnum }}人</div>
                  <div class="info_list">基本称职：{{ gradeNumObj.cnum }}人</div>
                  <div class="info_list">不称职：{{ gradeNumObj.dnum }}人</div>
                  <div class="info_list">不定等次：{{ gradeNumObj.enum }}人</div>
                </div>
              </div>
            </div>
          </div>
          <pagination
            slot="pagination"
            :page-size.sync="pageParam.pageSize"
            :total="pageParam.totalSize"
            :current-page.sync="pageParam.currentPage"
            :pageSizes="[10, 20]"
            layout="slot,prev, pager, next, sizes, jumper"
            @change="onPageChange"></pagination>
        </YearTable>
      </div>
    </div>
  </div>
</template>

<script>
import { pageYearAssList, saveYearAss, subYearAss, listAssYear, listAssOrg, getYearAssStat } from '@apis/evaluation.js'
import YearTable from './components/YearTable'
import pagination from '@com/pagination'
export default {
  name: 'indexYear',
  components: { YearTable, pagination },
  props: {},
  data() {
    return {
      tableList: [],
      grainDate: '2023',
      timeList: [],
      summaryForm: {
        orgId: '',
        finalRank: '',
        name: '',
        assStatus: '',
      },
      sureOption: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '0',
          label: '未确认',
        },
        {
          value: '1',
          label: '已确认',
        },
      ],
      orderOption: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '1',
          label: '优秀',
        },
        {
          value: '2',
          label: '称职',
        },
        {
          value: '3',
          label: '基本称职',
        },
        {
          value: '4',
          label: '不称职',
        },
        {
          value: '5',
          label: '不定等次',
        },
      ],
      unitData: [],
      gradeNumObj: {
        anum: 0,
        bnum: 0,
        cnum: 0,
        dnum: 0,
        enum: 0,
        assNum: 0,
        totalNum: 0,
        isSubmit: '0',
      },
      pageParam: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      assessRatio: {
        firstRatio: 0.2,
        secRatio: 0.2,
        thirdRatio: 0.2,
        fourthRatio: 0.4,
      },
      activeRow: {},
      activeRank: '',
      tableSort: '',
    }
  },
  watch: {},
  computed: {},
  created() {
    this.listAssYear()
  },
  mounted() {},
  methods: {
    searchData() {
      this.initData()
    },
    exportClick() {},
    onPageChange(obj) {
      this.pageParam.currentPage = obj.pageNumber
      this.pageParam.pageSize = obj.pageSize
      this.initData()
    },
    submitResultBatch() {
      subYearAss({
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
        year: this.grainDate,
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('提交成功')
          this.initData()
          this.getYearAssStat()
        }
      })
    },
    setEqual(item, row) {
      if (this.disabled) return
      if (item.id === row.finalRank) return
      this.activeRank = item.id
      this.activeRow = JSON.parse(JSON.stringify(row))
      saveYearAss({
        assObjId: row.assObjId,
        finalRank: item.id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
        year: this.grainDate,
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('保存成功')
          this.initData()
          this.getYearAssStat()
        }
      })
    },
    changeSort(data) {
      this.tableSort = data.order
      this.initData()
    },
    initData() {
      pageYearAssList({
        current: this.pageParam.currentPage,
        kw: this.summaryForm.name,
        size: this.pageParam.pageSize,
        year: this.grainDate,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
        orgId: this.summaryForm.orgId,
        finalRank: this.summaryForm.finalRank,
        assStatus: this.summaryForm.assStatus,
        order: this.tableSort,
      }).then(res => {
        if (res.code === 0) {
          this.tableList = res.data.records
          this.pageParam.totalSize = res.data.total
        }
      })
    },
    listAssYear() {
      listAssYear({
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.code === 0) {
          this.timeList = res.data
          if (res.data.length) {
            this.grainDate = res.data[0].year
          }
          this.listAssOrg()
          this.getYearAssStat()
          this.initData()
        }
      })
    },
    listAssOrg() {
      listAssOrg({
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
        year: this.grainDate,
      }).then(res => {
        if (res.code === 0) {
          this.unitData = res.data
        }
      })
    },
    getYearAssStat() {
      getYearAssStat({
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
        year: this.grainDate,
      }).then(res => {
        if (res.code === 0) {
          this.gradeNumObj.anum = res.data.anum || 0
          this.gradeNumObj.bnum = res.data.bnum || 0
          this.gradeNumObj.cnum = res.data.cnum || 0
          this.gradeNumObj.dnum = res.data.dnum || 0
          this.gradeNumObj.enum = res.data.enum || 0
          this.gradeNumObj.assNum = res.data.assNum || 0
          this.gradeNumObj.totalNum = res.data.totalNum || 0
          this.gradeNumObj.isSubmit = res.data.isSubmit || '0'
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.index-year {
  height: 100%;
  .content {
    height: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    .search-box {
      width: 100%;
      margin-bottom: 10px;
    }
    .year-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      .search-item {
        display: flex;
        align-items: center;
        .item_label {
          margin-right: 10px;
        }
        .mini-select {
          width: 100px;
        }
      }
    }
  }
}
</style>
